<template>
    <div class="skind-root">
        <div class="fixed">
        <Navbar>商品列表</Navbar>
     
        <div id="header">
            <span class="header-kind">{{bkind}} > {{skind}}</span>
        </div>
       
            <div class="select-box">
                <span 
                    @click="totalClick" 
                    :class="{redtext:selectItem==1}"
                >综合 <span class="fa fa-sort-desc indicant" style="font-size:13px"></span>
                </span>
                <span 
                    @click="numClick" 
                    :class="{redtext:selectItem==2}">销量</span>
                <span>
                    <span 
                        @click="priceClick" 
                        :class="{redtext:selectItem==3}"
                    >价格</span>
                    <span class="indicant-box">
                        <span 
                            class="fa fa-sort-asc" style="font-size:13px" :class="{redtext:isAsc==1}"
                        ></span>
                        <span 
                            class="fa fa-sort-desc" style="font-size:13px" :class="{redtext:isAsc==2}"
                        ></span>
                    </span> 
                </span>
                
                <span @click="selectClick" :class="{redtext:selectItem==4}" >筛选</span>
            </div>
            </div>

            <div id="text">
                <div v-for="g in itemskindAll">
                    <router-link 
                        :to="{path:'/Category/goodsList/goodsone',query:{_id:g._id}}" 
                        class="skind-item"
                    >
                        <div>
                            <img :src="'/images/goods/'+g.img[0]" class="goods-img">
                        </div>
                        <div class="skind-item-right">
                            <div>
                                <p class="goods-desc" style="font-size:15px">【{{g.brandname}}】{{g.goodsname}}</p>
                            </div>
                            <div>
                                <p style="font-size:16px;color:#ee0000" class="fa fa-rmb">{{g.newprice}}</p>
                                <p style="font-size:13px;color:#999">已售{{g.num}}件</p>
                            </div>
                        </div>
                    </router-link>
                    <div class="goods-div"></div>
                </div>
            </div>
            
        <transition name="select">
            <div id="select" v-if="showSelect">
                <p>请选择价格区间:</p>
                <br>
                <br>
                <input type="text"  v-model="lowprice" placeholder="最低价格">-<input type="text"  v-model="highprice" placeholder="最高价格">
                <br>
                <br>
                <button @click="btnClick">提交</button>
            </div>
         </transition>
    </div>
</template>

<script>
import {mapState} from 'vuex';
import Navbar from "../components/Navbar.vue"
export default {
    data:function(){
        return {
            selectItem:1,
            asc:true,
            showSelect:false,
            lowprice:"",
            highprice:""
        }
    },
    components:{
        Navbar,
    },
    methods:{
        priceClick:function(){
            this.showSelect  =false;
            this.selectItem=3;
            this.asc = !this.asc;
            var params = {
                asc:this.isAsc,
                smallkind:this.$route.query.skind,
                price:1,
            }
            this.$store.dispatch("requestItemskindAll",params)
            .then(res=>{
                console.dir(res.data.err);
            })
        },
        numClick:function(){
             this.showSelect  =false;
            this.selectItem=2;
            var params = {
                smallkind:this.$route.query.skind,
                num:1
            }
            this.$store.dispatch("requestItemskindAll",params)
            .then(res=>{
                console.dir(res.data.err);
            });

        },
        totalClick:function(){
             this.showSelect  =false;
            this.selectItem=1;
            var params = {
                smallkind:this.$route.query.skind,
            }
            this.$store.dispatch("requestItemskindAll",params)
            .then(res=>{
                console.dir(res.data.err);
            });

        },
        selectClick:function(){
            this.selectItem=4;
            this.showSelect=!this.showSelect;

        },
        btnClick:function(){
            this.showSelect  =false;
         
            var params = {
                smallkind:this.$route.query.skind,
                lowprice:this.lowprice,
                highprice:this.highprice,
                select:1
            }
            this.$store.dispatch("requestItemskindAll",params)
            .then(res=>{
                console.dir(res.data.err);
            });

        }
    },
    mounted:function(){
        // 页面是否请求
            this.$store.commit("setIsrequest",true);
            var params = {
                smallkind:this.$route.query.skind,
                home:1
            };
            this.$store.commit("setItemskindAll","");
            setTimeout(()=> {
                this.$store.dispatch("requestItemskindAll",params);
            }, 1000);
    },
    computed:{
        isAsc:function(){
            if(this.selectItem==3&&!this.asc){
                return 1;
            }else if(this.selectItem==3&&this.asc){
                return 2;
            }else{
                return 0;
            }
        },
        skind:function(){
            return this.$route.query.skind;
        },
        bkind:function(){
            return this.$route.query.bkind;
        },
        ...mapState([
            "itemskindAll",
            "isrequest",
        ])
    }
}
</script>

<style scoped>
.fixed{
    position:fixed;
    top:0;
    left:0;
    z-index:200;
    background-color: #eeeeee;
    width:100%;
   
}
#text{
    margin-top:143px;
}
#select{
    width:300px;
    height:180px;
    background-color:#7D9CB2;
    position: absolute;
    top:140px;
    right:10px;
    text-align: center; 
    padding: 20px;
}
#select p{
    display: inline-block;
    width:120px;
    text-align: center;
}

#select input{
    width:120px;
}
    .skind-root{
        width: 100%;
        height:100vh;
        background-color: #fefefe;
        z-index: 10;
    }
    #header{
        padding: 2px 5px;
        height: 44px;
        line-height: 33px;
        background-color: #7D9CB2;
        text-align: center;
        position: relative;
    }
    #header span{
        font-size: 16px;
        color: white;
        position: absolute;
        top: 8px;
        left: 12px;
    }
    .header-kind{
        position: relative;
        top: 10px;
    }
    .select-box{
        margin: 5px 0;
        border: 1px solid #ddd;
        border-left: none;
        border-right: none;
        display: flex;
        justify-content: space-around;
        -moz-user-select: none;
    }
    .select-box>span{
        padding-top:8px;
        padding-bottom: 8px; 
    }
    .skind-item{
        display: block;
        display: flex;
        padding-left: 1px;
        /*padding-right: 3px;*/
    }
    .skind-item>div:nth-of-type(1){
        width: 30vw;
    }
    .goods-img{
        width: 30vw;
        height: 30vw;
    }
    .skind-item-right{
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .goods-div{
        position: relative;
        left: 32vw;
        margin: 2px 0;
        border-top: 1px solid #ddd;
        width: 68vw;
        height: 0;
    }
    .goods-desc{
        color: #111;
        padding-right: 2px;
        line-height: 16px;
        height: 32px;
        width: 241px;
        overflow : hidden;
    }
    .goods-desc:after{
        content: "...";
    }
    .redtext{
        color: #ee0000;
    }
    .indicant{
        position: relative;
        top: -2px;
    }
    .indicant-box {
        position: relative;
        padding-left: 2px;
    }
    .indicant-box span:nth-of-type(2){
        position: absolute;
        left: 2px;
        bottom: 1px;
    }





.select-enter {
        transform: translate(100%, 0);
    }

    .select-enter-active,
    .select-leave-active {
        transition: all 0.7s;
    }

    .select-enter-to,
    .select-leave {
        transform: translate(0, 0);
    }

    .select-leave-to {
        transform: translate(100%, 0);
    }

</style>